<div :id="uploadID" v-cloak class="uploadcontainer">
    <div class="uploaderrorinfo" v-if="showErrorInfo" v-text="errorInfoText"></div>
    <el-upload :action="uploadUrl" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove"
        :on-success="handleSuccess" :before-upload="beforeUpload" :data="uploadData" :disabled="readonly"
        :style="{width: uploadWidth + 'px'}" v-if="!readonly" :accept="fileTypeExts">
        <el-button :id="btnID" size="small" type="primary" v-show="!readonly">{{uploadButtonText}}</el-button>
        <div slot="tip" class="el-upload__tip">{{uploadTipText}}</div>
    </el-upload>
    <div class="commonfilelist" v-if="fileList">
        <div class="commonfileitem" v-for="file in fileList">
            <i class="el-icon-document" style="margin-right: 5px;"></i>
            <div @click="openFile(file)"> {{file.name}}</div>
            <i v-if="!readonly" class="el-icon-delete-solid" style="margin-left:5px;font-size:18px;"
                @click="handleRemove(file)"></i>
            <i  v-if="file.name.indexOf('.mp4')>0" class="el-icon-video-play"
             style="margin-left:5px;font-size:18px;" @click="openVideo(file)"></i>
        </div>
    </div>
</div>